<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--1、头部-->
<head th:replace="common/front_fragment::head(搜索页面)"></head>

<!--2、、js引用-->
<div th:replace="common/front_fragment::myJs">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"
            th:src="@{/js/semantic.js}"></script>
</div>

<!--3、中间内容、底部footer-->
<body class="bg-front">
<div class="wrap">
    <div class="main">
        <!--3.1：导航栏-->
        <div>
            <nav th:replace="~{common/front_fragment::nav(-1)}"></nav>
        </div>

        <!--3.2：中间内容-->
        <div class="m-opacity m-container-middle m-padded-tb-big m-phone-opacity">
            <div class="ui container">  <!--拥有：响应式的效果-->
                <!--推荐：篇目数-->
                <div class="ui segment center aligned m-padded-tb-small search-front-bg">
                    <span class="span-front-font">搜索结果：</span>
                    <span class="span-front-num" th:text="${pageInfo.getTotal()}">16篇</span> <span
                        class="span-front-font">篇</span>
                </div>

                <!--当前分类：所有文章-->
                <div class="ui segment title-front-radius" th:each="blog : ${pageInfo.getList()}">
                    <div class="ui padded-lr-big vertical m-padded-tb-small  m-mobile-clear segment">
                        <div class="ui middle aligned mobile reversed stackable grid">
                            <div class="eleven wide column m-padded-tb-small">
                                <div class="title-header m-margin-bottom-middle"><a class="m-black" target="_blank"
                                                                                    th:href="@{/front/blog/{id}(id=${blog.id})}"
                                                                                    th:text="${blog.title}"></a></div>
                                <p class="m-text m-margin-top-larger-px" th:text="|${blog.description}...|">
                                    内容
                                </p>

                                <div class="ui m-margin-top-larger-px grid">
                                    <div class="twelve wide column">
                                        <div class="ui mini horizontal link list">
                                            <div class="item">
                                                <img src="/images/avatar.jpg" th:src="@{${blog.user.avatar}}" alt=""
                                                     class="ui avatar image">
                                                <div class="content"><a th:href="@{/front/about}" target="_blank"
                                                                        class="header" th:text="${blog.user.nickname}">名称</a>
                                                </div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i><span
                                                    th:text="${#dates.format(blog.createTime, 'yyyy-MM-dd HH:mm')}">时间</span>
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i> <span th:text="${blog.views}">浏览量</span>
                                            </div>
                                            <div class="item">
                                                <i class="comment outline icon"></i><span
                                                    th:text="${blog.commentNum}">评论数</span>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="right aligned four wide column">
                                        <a target="_blank"
                                           class="ui teal basic label m-padded-tiny m-text-thin font-spacing"
                                           th:text="${blog.type.name}">类型名</a>
                                    </div>
                                </div>
                            </div>

                            <div class="five wide column">
                                <a href="#" th:href="@{/front/blog/{id}(id=${blog.id})}" target="_blank">
                                    <img th:src="@{${blog.firstPicture}}" alt="" class="ui rounded image">
                                </a>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>